<template>
  <div class="shopDetails">
    <el-image style="width: 400px; height: 400px" :src="detailsContent.skuPicture" fit="fill" />
    <div class="shopContent">
      <p><span>云仓编码:{{ detailsContent.productMergeId }}</span><span>云商品ID:{{ detailsContent.cloudGoodId
          }}</span><span>产品ID:{{ detailsContent.companyGoodId }}</span></p>
      <p><span>店铺商品ID: <strong style="color: blue;">{{ detailsContent.shopGoodId }}</strong> </span><span
          @click="openEvery" class="headclass">更多记录</span></p>
      <p><span>所在仓库:{{ detailsContent.warehouseName }}</span><span>所在货区: <strong
            v-for="iten in detailsContent.warehouseAreaList" :key="iten.id">{{ iten.name }}</strong></span>
        <span>所在库位: <strong v-for="iten in detailsContent.warehouseLocationList" :key="iten.id">{{ iten.name
            }}</strong></span>
      </p>
      <p><span>可售库存数:{{ detailsContent.stockNum }}</span><span>归属货主:{{ 无数据 }}</span></p>

      <p><span @click="openSetStall" class="headclass">所属档口: <span style="color: skyblue;"
            v-for="item in detailsContent.productGearOpenList" :key="item.id">{{ item.name }}</span> </span></p>
    </div>
  </div>
  <div>
    <el-dialog v-model="dialogVisible" width="600">
      <span>
        <el-form :model="form" label-width="auto" inline>
          <el-form-item label="档口名称：">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button @click="form.name = '', getList()">清除</el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.id" :value="item.id" v-for="item in productGearListTable" :key="item.key">{{
      item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="setProductGear">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="dialogVisibleEvery" width="600">
      <span>
        <strong>仓库商品ID:{{ detailsContent.id }}</strong>
        <el-table :data="detailsContent.productList" border style="width: 100%;margin-top: 10px;">
          <el-table-column prop="companyGoodId" label="公司商品ID" width="180" />
          <el-table-column prop="shopGoodId" label="店铺商品ID" width="180" />
          <el-table-column prop="shopGoodSkuId" label="店铺SKUID" />
        </el-table>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref, onBeforeMount } from 'vue'
import { useAlertsStore } from '@/store/index'
import { ElMessage } from 'element-plus'
import { productGearCanUseList, productGearCreate, productProductFullInfo } from '@/api/index'
const store = useAlertsStore()
const route = useRoute()
onBeforeMount(() => {
  getDetails(route.query.id)
  objContent.value = JSON.parse(route.query.row)
  store.productGearListBtn({ productId: objContent.value.id, name: '' })
})
const detailsContent = ref({})
const getDetails = (id) => {
  productProductFullInfo(id).then(res => {
    console.log('res')
    const { data: { data } } = res
    console.log(data)
    detailsContent.value = data
  })
}
const objContent = ref()
const dialogVisible = ref(false)
const form = ref({})
const openSetStall = () => {
  dialogVisible.value = true
  getList()
}
const productGearListTable = ref([])
const getList = () => {
  const checkList = []
  productGearCanUseList({
    productId: route.query.id,
    name: form.value.name
  }).then(res => {
    const { data: { data } } = res
    data.forEach(element => {
      if (element.isBind) {
        checkList.push(element.id)
      }
    })
    productGearListTable.value = data
  })
}
const checkList = ref([])
const setProductGear = () => {
  productGearCreate({
    productId: objContent.value.id,
    productGearIds: checkList.value
  }).then(res => {
    store.productGearListBtn({ productId: objContent.value.id, name: '' })
    ElMessage.success('操作成功')
    dialogVisible.value = false
  })
}
const dialogVisibleEvery = ref(false)
const openEvery = () => {
  dialogVisibleEvery.value = true
}
</script>

<style lang='less' scoped>
.shopDetails {
  padding: 20px 0px 0px 50px;
  display: flex
}

.shopContent {
  margin-left: 40px;
}

.shopContent p span {
  margin-left: 40px;
}
</style>
